<template>
  <el-main>
    <div
      class="bigpr"
      style="margin-left: 300px"
      v-loading="loading"
      element-loading-background="white"
    >
      <div class="PrHeader">
        <span class="selectspan">
          状态
          <el-select
            v-model="state"
            class="selectstate"
            placeholder="Select"
            size="large"
            style="width: 120px; margin-right: 20px"
            @change="selectstate"
          >
            <el-option
              v-for="item in states"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <el-button class="newpr" type="primary" size="large" @click="newpr"
          >新建pullrequest
        </el-button>
      </div>
      <!-- eslint-disable-next-line -->
      <div v-for="pr in prs">
        <el-card shadow="hover" style="cursor: pointer" class="prcard">
          <div style="margin-bottom: 10px; font-size: 20px">
            {{ pr.describe }}
          </div>
          <div style="margin-bottom: 10px">
            <el-tag size="large" type="warning">{{ pr.sBranchId }}</el-tag>
            ->
            <el-tag size="large" type="warning">{{ pr.tBranchId }}</el-tag>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span>
              <span style="margin-right: 100px">
                <el-icon size="small" color="green"><Guide /></el-icon>
                {{ pr.id }}</span
              >
              <span
                ><el-icon size="small" color="coral"><User /></el-icon
                >{{ pr.uId }}
              </span>
            </span>
            <span>
              <el-icon size="large" color="blue"><Clock /></el-icon
              >{{ pr.createTime }}</span
            >
          </div>
        </el-card>
      </div>
    </div>
  </el-main>
  <el-aside><HistoryRecord></HistoryRecord></el-aside>
</template>
<script>
import HistoryRecord from "../HistoryRecord.vue";
export default {
  name: "ShowPullRequest",
  components: { HistoryRecord },
  data() {
    return {
      loading: true,
      prs: [],
      state: 0,
      states: [
        {
          value: 0,
          label: "所有的",
        },
        {
          value: 1,
          label: "进行中",
        },
        {
          value: 2,
          label: "已完成",
        },
      ],
    };
  },
  mounted() {
    this.loading = false;
  },
  methods: {
    newpr() {
      this.$router.push("newpullrequest");
    },
  },
};
</script>

<style scope>
.selectspan {
  font-size: 15px;
}
.PrHeader {
  background-color: #f6f6f6;
  justify-content: space-between;
  display: flex;
  padding: 10px;
  vertical-align: middle;
}
.prcard {
}
.prcard:hover {
  color: chocolate;
}
</style>
